import React, { useEffect, useState } from "react"

export default function CountrySelect(props) {
  var { show, handleToggle, holdRes } = props
  var [cur, setCur] = useState(0)
  var [pleaseSelect, setPleaseSelect] = useState([])
  var [shenShiQuJieDao, setShenShiQuJieDao] = useState([])

  useEffect(() => {
    import(/* webpackChunkName: "four-level-address" */ "./four-level-address.js").then((res) => {
      shenShiQuJieDao[0] = res.default
      setShenShiQuJieDao([...shenShiQuJieDao])
      pleaseSelect[0] = "请选择"
      setPleaseSelect([...pleaseSelect])
    })
  }, [])
  function handleClick(parentCode, idx) {
    pleaseSelect[idx] = parentCode.name
    setPleaseSelect([...pleaseSelect])
    if (!parentCode.children) {
      //已经点击到最后,可以emit了
      holdRes(pleaseSelect)
      handleToggle()
      return
    }
    var arr = []
    if (parentCode.children[0].children) {
      arr = parentCode.children[0].children
    } else {
      //若进入此处,则为最后一层,意味着屏幕将出现"街道"
      arr = parentCode.children
    }
    pleaseSelect[idx + 1] = "请选择"
    setPleaseSelect([...pleaseSelect])

    shenShiQuJieDao[idx + 1] = arr
    setShenShiQuJieDao([...shenShiQuJieDao])
    setCur(idx + 1)
  }
  function handleClose() {
    setShow(false)
  }
  return (
    <>
      <div className="select-mask" style={{ display: show ? "block" : "none" }} onClick={handleToggle}></div>
      <div className={["yt yt-ver select-country-wrap"].join(" ")} style={{ transform: show ? "inherit" : "translateY(100%)" }}>
        <div className="yt select-title">
          {pleaseSelect.map((v, k) => {
            return (
              <div
                key={k}
                onClick={() => {
                  setCur(k)
                }}
                className={["pleasess", cur == k ? "pleaseCur" : ""].join(" ")}
              >
                {v}
              </div>
            )
          })}
          <div className="closeSelect fontali" onClick={handleToggle}>
            &#xe672;
          </div>
        </div>
        <div className="yt-f1 sec-b" style={{ overflow: "auto" }}>
          {shenShiQuJieDao.map((v, k) => {
            return (
              <div style={{ display: cur == k ? "block" : "none" }} key={k}>
                {shenShiQuJieDao[k].map((vv, kk) => {
                  return (
                    <div
                      className="select-area"
                      key={kk}
                      onClick={() => {
                        handleClick(vv, k)
                      }}
                    >
                      {vv.name}
                    </div>
                  )
                })}
              </div>
            )
          })}
        </div>
      </div>
    </>
  )
}
